<template>
  <div id="app">
    <!--TabBar界面做缓存处理-->
    <keep-alive>
      <router-view v-show="$route.meta.keepAlive" style="height:calc(100% - 84px)"
                   @touchstart.native="onTouchStart($event,$route)"
                   @touchend.native="onTouchEnd($event)"></router-view>
    </keep-alive>
    <!--其余界面不做缓存-->
    <router-view v-show="!$route.meta.keepAlive" style="height: 100%"
                 @touchstart.native="onTouchStart($event,$route)"
                 @touchend.native="onTouchEnd($event)"></router-view>
    <tab-bar v-if="$route.meta.showTab"/>
  </div>
</template>
<script>
import TabBar from "./views/tab_bar/TabBar"
export default {
  name: "App",
  components: {
    TabBar
  },
  data() {
    return {
      currentRoute: {},
      tabBarList:['chat','contacts','find','me'],
      moveState: false,
      startMoveX: 0,
      endMoveX: 0,
      startMoveY: 0,
      endMoveY: 0,
      loop: null,
      longPressState: false,
    };
  },
  mounted() {
    let _this = this;
    console.log("app-start")
    if(window.plus){
      console.log("plusready")
      this.$contactsDB.createTable();
    }else{
      document.addEventListener('plusready',function () {
        console.log("plusready")
        _this.$contactsDB.createTable();
      },false);
    }
  },
  methods: {
    longPress() {
      this.longPressState = false
      // 清空定时器
      clearInterval(this.loop);
      // 设置一秒长按时间触发长按逻辑
      this.loop = setTimeout(function() {
        // 标记为长按状态
        this.longPressState = true;
        // 终止移动状态
        this.moveState = false;
      }.bind(this), 1000);
    },
    onTouchStart(e,route) {
      // 滑动状态已触发，则不能再次触发
      if(this.moveState) {
        return
      }
      this.moveState = true;
      this.longPress();
      this.currentRoute = route;
      this.startMoveX = e.changedTouches[0].screenX
      this.startMoveY = e.changedTouches[0].screenY
    },
    onTouchEnd(e) {
      // 长按逻辑则不触发切换页面,或者滑动状态没触发
      if(this.longPressState || !this.moveState) {
        return
      }
      this.endMoveX = e.changedTouches[0].screenX
      this.endMoveY = e.changedTouches[0].screenY
      this.moveState = false
      // 判定是否主要为纵向滑动，不是纵向滑动则判定为横向滑动
      if(Math.abs(this.endMoveY - this.startMoveY) < 100) {
        // 横向滑动
        if(Math.abs(this.endMoveX - this.startMoveX) > 100) {
          // 向右滑动，代表返回
          if(this.endMoveX > this.startMoveX) {
            // 主菜单页则切换tabbar
            if(this.currentRoute.meta.showTab) {
              let toIndex = this.tabBarList.indexOf(this.currentRoute.name) - 1
              if(toIndex >= 0) {
                this.$router.replace({'name': this.tabBarList[toIndex]})
              }
            }/*else {
              // 否则做回退操作
              this.$router.go(-1);
            }*/
          }else {
            // 向左滑动，代表前进
            // 主菜单页则切换tabbar
            if(this.currentRoute.meta.showTab) {
              let toIndex = this.tabBarList.indexOf(this.currentRoute.name) + 1
              if(toIndex <= 4) {
                this.$router.replace({'name': this.tabBarList[toIndex]})
              }
            }/*else {
              // 否则做前进操作
              this.$router.go(1);
            }*/

          }
        }
      }
    },
  }
};
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
html{
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #EDEDED;
 }
*{
  -webkit-touch-callout:none; /*系统默认菜单被禁用*/
  -webkit-user-select:none; /*webkit浏览器*/
  -moz-user-select:none;/*火狐*/
  -ms-user-select:none; /*IE10*/
  user-select:none;
}

// iOS中会出现输入框自动失去焦点无法输入内容的问题，所以要将输入框设置为auto
input, textarea {
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  -khtml-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
//隐藏滚动条
html,body,#app{
  height: 100%;
  overflow-y: auto;
  ::-webkit-scrollbar {
    width: 0;
  }
}
</style>
